<template>
  <div class="pt-10n">
    <div class="w-68-p bgFAFAFA mx-auto pb-10n round-20 overflow-hidden">
      <van-field
        v-model="content"
        rows="2"
        class="bgFAFAFA"
        autosize
        type="textarea"
        maxlength="260"
        show-word-limit
        placeholder="补充描述，有助于我们更好的处理您的问题"
      />
      <div class="mt-20 box-border px-20">
        <van-uploader v-model="fileList" multiple :max-count="3" />
      </div>
    </div>
    <div class="ml-auto mr-auto mt-13n w-68-p">
      <van-button type="primary" round size="large" @click="submit"
        >提交</van-button
      >
    </div>
  </div>
</template>
<script setup>
import { reAssign } from "@/utils/common";
import { showToast, showLoadingToast, closeToast } from "vant";
import { report, picUpload } from "@/api";

const route = useRoute();
const router = useRouter();
let openId = undefined;
const content = ref();
const pic = ref();
const fileList = ref([]);

// 初始化表单值
onMounted(() => {
  const key = route.fullPath;
  if (sessionStorage.getItem(key) || history.state.openId) {
    if (history.state.openId) {
      sessionStorage.setItem(key, history.state.openId);
    } else {
      history.state.openId = sessionStorage.getItem(key);
    }
    openId = history.state.openId;
  }
});
// 提交
const submit = () => {
  if (!content.value) return showToast("请输入问题描述");
  showLoadingToast({
    message: "正在提交...",
    duration: 0,
    forbidClick: true
  });
  const apiArr = [];
  fileList.value.forEach((element) => {
    const formData = new FormData();
    formData.append("pic", element.file);
    apiArr.push(picUpload(formData));
  });
  Promise.all(apiArr).then((res) => {
    pic.value = [];
    res.forEach((item) => {
      pic.value.push(item.pic);
    });
    report({ pic: pic.value, content: content.value, openId })
      .then((re) => {
        pic.value = content.value = undefined;
        fileList.value = [];
        closeToast();
        showToast("提交成功");
      })
      .catch((err) => {
        closeToast();
        showToast(err?.message || err?.code || "举报");
      });
  });
};
</script>
<style lang="scss" scoped>
.bgFAFAFA {
  background: #fafafa;
}
.w-68-p {
  width: calc(100% - 68px);
}
</style>
